<template>
  <div>
    <x-header :left-options="{backText: ''}" >上传图片</x-header>
    <div class="ui-body">
      <group>
        <div class="ui-answer-img">
          <input type="file" accept="image/*" @change="showImg" ref="uploadImg" id="uploadImg"/>
          <img v-if="imgPath" :src="imgPath" style="width: 100%">
        </div>
      </group>
      
      <box gap="0 10px">
        <flexbox>
          <flexbox-item>
            <x-button type="primary" link="BACK" style="margin-top: 40px;">完成</x-button>
          </flexbox-item>
          <flexbox-item v-if="$store.state.descList[$route.params.index]"> 
            <x-button @click.native="delImg"  type="warn" style="margin-top: 40px;">删除</x-button>
          </flexbox-item>
        </flexbox>
      </box>
    </div>
  </div>
</template>

<script>
import { Group, XTextarea, XButton, Box, XHeader, Flexbox, FlexboxItem } from 'vux'
import store from '@/store'
import axios from 'axios'
import 'weui'
import weui from '../../static/weui.min.js'

require('es6-promise').polyfill()
var qs = require('qs')

export default {
  store,
  components: {
    Group,
    XTextarea,
    XButton,
    XHeader,
    Box,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      imgPath: this.$store.state.descList[this.$route.params.index] && !this.$route.params.create ? this.$store.state.descList[this.$route.params.index].img : ''
    }
  },
  mounted () {
    let _this = this
    weui.uploader('#uploadImg', {
      url: _this.$store.state.url + '/VoteManage/VoteImageUpload.ashx',
      auto: true,
      type: 'base64',
      fileVal: 'fileVal',
      onSuccess: function (rs) {
        let data = rs.data
        if (data.code === 200) {
          _this.imgPath = _this.$store.state.imgUrl + data.url
          var descList = _this.$store.state.descList
          _this.$route.params.create ? descList.splice(_this.$route.params.index, 0, {img: _this.imgPath}) : descList.splice(_this.$route.params.index, 1, {img: _this.imgPath})
          _this.$store.commit('updateState', {key: 'descList', value: descList})
        } else {
          _this.$vux.toast.text(data.msg, 'bottom')
        }
        _this.$vux.loading.hide()
      },
      onError: function (rs) {
        console.log(rs)
      },
      onQueued: function () {
        console.log('xxxxxxxxx')
      }
    })
  },
  methods: {
    showImg (e) {
      console.log(weui)
    },
    getObjectURL (file) {
      try {
        var url = null
        this.showLoading()
        var _this = this
        if (window.createObjectURL !== undefined) { // basic
          url = window.createObjectURL(file)
        } else if (window.URL !== undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL !== undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file)
        }
        var Img = new Image()
        Img.src = url
        Img.onload = function () { // 要先确保图片完整获取到，这是个异步事件
          let canvas = document.createElement('canvas')
          let width = Img.width
          let height = Img.height
          canvas.width = width
          canvas.height = height
          canvas.getContext('2d').drawImage(Img, 0, 0, width, height) // 将图片绘制到canvas中
          _this.imgPath = canvas.toDataURL('image/jpeg')
          _this.upLoadImg(canvas.toDataURL('image/jpeg'))
        }
      } catch (e) {
        this.$vux.toast.text('该设备不支持拍照上传', 'bottom')
      }
    },
    upLoadImg (Base64) {
      let _this = this
      axios.post(this.$store.state.url + '/VoteManage/VoteImageUpload.ashx', qs.stringify({Base64: Base64}))
      .then((rs) => {
        let data = rs.data
        if (data.code === 200) {
          _this.imgPath = _this.$store.state.imgUrl + data.url
          var descList = _this.$store.state.descList
          _this.$route.params.create ? descList.splice(_this.$route.params.index, 0, {img: _this.imgPath}) : descList.splice(_this.$route.params.index, 1, {img: _this.imgPath})
          _this.$store.commit('updateState', {key: 'descList', value: descList})
        } else {
          this.$vux.toast.text(data.msg, 'bottom')
        }
        _this.$vux.loading.hide()
      })
      .catch((response) => {
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
      })
    },
    getBase64Image (file) {
      try {
        this.showLoading()
        var _this = this
        if (JSON.stringify(file).length === 2) {
          this.getObjectURL(file)
          return
        }
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          _this.upLoadImg(this.result)
        }
      } catch (e) {
        this.$vux.toast.text('该设备不支持拍照上传', 'bottom')
      }
    },
    showLoading () {
      this.$vux.loading.show({
        text: '上传中...'
      })
    },
    delImg () {
      var descList = this.$store.state.descList
      descList.splice(this.$route.params.index, 1)
      this.$store.commit('updateState', {key: 'descList', value: descList})
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped src='@/assets/css/uploadImg.css'></style>
